import { validateAndTips } from 'utils/validate/index';
import cookies from 'utils/cookies';

/*

  获取校验码的mixins

  examples:
  <template>
    <div class="shoujihao login-form-input van-hairline--bottom">
      <input placeholder="请输入手机号码" type="text" v-model.trim="verifyPhone" />
    </div>
    <div class="yanzm login-form-input van-hairline--bottom">
      <input placeholder="请输入验证码" type="text" v-model.trim="verifyCode" />
      <div
        class="click-huoqu"
        :disabled="disabled"
        @click="handleClickGetVerifyCode(sendPhoneToGetVertifyCode)"
      >{{verifyText}}</div>
    </div>
  </template>
  <script>
  import vertifyCodeMixins from "src/mixins/verify-code";

  export default {
    data(){
      return {

      }
    },
    mixins:[ vertifyCodeMixins ],
    methods:{
      /**
       * 自定义获取验证码的接口方法 
       //
      sendPhoneToGetVertifyCode() {
        let params = {
          phone: this.verifyPhone,
        };
        return getPhoneCodeByPhoneAPI(params);
      },
    }
  }
  </script>
  
  注意：

   1. 其中手机号码与验证码变量已经确定，分别是
    - verifyPhone 手机号码

   2. 点击触发获取校验码的事件处理函数以确定
    - handleClickGetVerifyCode(sendPhoneToGetVertifyCode)
    但是我们可以自定义 sendPhoneToGetVertifyCode() 去自定义处理验证码获取接口方法

*/

export default {
  data() {
    return {
      // 验证码校验的手机号 '15811398806'
      verifyPhone: '15811398806',
      // // 校验码
      // verifyCode: '',
      // 当前是否可以获取校验码
      disabled: false,
      // 校验码显示信息
      verifyText: '获取验证码',

      verifyTimer: null,
      // 当前剩余的倒计时时间
      verifyResidueTimer: 60,
      // 倒计时
      verifyMaxTimer: 10,
    };
  },
  created() {
    this.initVerifyCodeTxt();
  },
  beforeDestroyed() {
    // 组件销毁前清除定时器
    if (this.verifyTimer) {
      clearInterval(this.verifyTimer);
    }
  },
  methods: {
    /**
     * 初始化获取校验码数据
     *  1. 初始化从cookies中获取历史校验时间 这样就可以防止用户刷新问题
     */
    initVerifyCodeTxt() {
      // 初始化的时候获取一下缓存中的时间
      const verifyTimer = cookies.get('verify-time');
      // 获取过期时间到现在的秒数
      let seconds = verifyTimer ? ((verifyTimer - new Date().getTime()) / 1000).toFixed(0) : 0;
      if (seconds) {
        this.disabled = true;
        this.verifyText = `剩余 ${seconds}s`;
        this.verifyResidueTimer = seconds;
        this.timeDownVerifyCode();
        //
      } else {
        this.disabled = false;
        this.verifyText = `获取验证码`;
      }
    },

    /**
     * 点击获取校验码触发事件
     */
    handleClickGetVerifyCode(next) {
      //  第一步 判断当前是否是可以发送的状态
      if (this.wait && this.disabled) {
        return;
      }
      // 第二步 校验手机号码的格式
      if (!validateAndTips(this.verifyPhone, 'phone')) {
        return;
      }

      next().then(({ respCode, respMsg, result }) => {
        if (respCode !== '0') {
          this.$toast.fail(respMsg);
          return;
        }
        // // 获取的校验码数据
        // _this.verifyCode = result;
        // 重置倒计时
        this.verifyResidueTimer = this.verifyMaxTimer;
        this.timeDownVerifyCode();
      });
    },

    /**
     * 执行校验码倒计时
     */
    timeDownVerifyCode() {
      this.disabled = true;
      let n = this.verifyResidueTimer;
      this.verifyText = '剩余 ' + n + 's';
      // 获取当前时间
      let nowTime = new Date().getTime();
      this.verifyTimer = setInterval(() => {
        if (n === 60) {
          cookies.set('verify-time', nowTime + n * 1000, {
            expires: n / 24 / 60 / 60,
          });
        }
        n = n - 1;
        if (n < 0) {
          cookies.remove('verify-time');
          clearInterval(this.verifyTimer);
        }

        this.verifyText = '剩余 ' + n + 's';
        if (this.verifyText < '剩余 ' + 0 + 's') {
          this.disabled = false;
          this.verifyText = '重新获取';
        }
      }, 1000);
    },
  },
};
